<template>
  <view class="success-container">
    <!-- 顶部蓝色背景 -->
    <view class="top-color"></view>

    <!-- 内容容器 -->
    <view class="content-box">
      <!-- 图标、文字、按钮统一居中容器 -->
      <view class="center-container">
        <!-- 成功图标 -->
        <image class="success-icon" src="@/img/车联网服务-08我的-06我的车辆-01添加车辆_slices/组 6@2x.png"></image>
        <!-- 提示文字 -->
        <text class="success-text">添加成功</text>
        <!-- 返回按钮 -->
        <button class="back-btn">返回</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 数据定义
    };
  }
};
</script>

<style scoped>
/* 页面容器 */
.success-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  z-index: 1;
}

/* 顶部蓝色背景条 */
.top-color {
  position: absolute;
  background-color: #487ffc;
  height: 300rpx;
  width: 100%;
  z-index: 2;
}

/* 白色内容卡片 */
.content-box {
  position: absolute;
  width: 90%;
  height: 600rpx;
  background-color: white;
  border-radius: 20rpx;
  margin: 100rpx 5% 0 5%;
  z-index: 3;
  top: -100px;
  
  /* 让内部元素居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 居中容器：统一管理图标、文字、按钮的垂直排列 */
.center-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
}

/* 成功图标样式 */
.success-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 20rpx; /* 与文字保持间距 */
}

/* 提示文字样式 */
.success-text {
  font-size: 32rpx;
  margin-bottom: 40rpx; /* 与按钮保持间距 */
}

/* 返回按钮样式优化 */
.back-btn {
  width: 300rpx;      /* 更长 */
  height: 60rpx;      /* 更窄 */
  line-height: 60rpx; /* 垂直居中 */
  background-color: #3184fd;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 30rpx; /* 更圆 */
  
  /* 去除默认边框 */
  border: none;
}

/* 按钮点击态优化（可选） */
.back-btn::after {
  border: none;
}
</style>